import React, {Component} from 'react';
import { Image,View, Text,StyleSheet,Dimensions,ScrollView,TouchableHighlight,Modal } from 'react-native';
import {WhiteSpace,Flex,ActivityIndicator,List,Toast,Carousel,Tabs} from 'antd-mobile-rn';
import Layout from '../components/Layout';
import { post } from '../utils/request';
import SyList from '../components/SyList';
import config from '../config';
import tool from '../utils/tool';
import CImage from '../components/CImage';
import CText from '../components/CText';
import AutoImage from '../components/AutoImage';


export default class PictureDetail extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            id: this.props.navigation.state.params.id,
            title:"",
            datalist:"",
            titleHeight:0,
            visible:false,
            previewurl:"",
        };
    }
    //组件加载
    componentDidMount() {
        post("/openapi/getInfo/",{
            id:this.state.id
        },(r)=>{
            //document.title=r.data.title +"-图片-"+config.sitename;
            this.setState({
                title:r.data.title,
                datalist:r.data.urls.split(',')
            });
            //console.log(r.data.urls);
        },(e)=>{
            Toast.fail(e.message,3);
        },(s)=>{
            this.setState({loading:s});
        });
    }

    //组件卸载
    componentWillUnmount() {

    }
    //属性改变
    componentWillReceiveProps(nextProps) {
    }

    onPress=(url)=>{
        //this.props.navigation.navigate('PictureZoom',{url:url});
        console.log("打开"+url);
        this.setState({
            previewurl:url,
            visible:true
        });
    }

    renderRow = (o) => {
        let item = o.item;
        return (
            <TouchableHighlight key={item} onPress={()=>{this.onPress(item)}}>
                <AutoImage
                style={{marginTop:1}}
                width={Dimensions.get("window").width-10}
                source={{uri: tool.getimageurl(Dimensions.get("window").width,0,1,item)}}
                />
              </TouchableHighlight>
        );
    };


    render() {
        return (
            <Layout back selectedTab={"Picture"} {...this.props}>
            <Flex style={{flex:1,flexDirection:"column"}}>
                <CText initHeight={10} title= {this.state.title} style={{margin:3}}>
                </CText>
                <Flex style={{margin:5,flex:1}}>
                    <SyList
                        data={this.state.datalist}
                        renderItem={this.renderRow}
                        ItemSeparatorComponent={<View/>}
                    />
                {/* <FlatList style={{flex:1}}>
                   
                </FlatList> */}
                </Flex>
            </Flex>
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.visible}
                onRequestClose={() => {
                    this.setState({visible:!this.state.visible,previewurl:""});
            }}
            >
                <Flex style={{flex:1,backgroundColor:"white"}}>
                    <TouchableHighlight 
                        onPress={() => {
                            this.setState({visible:!this.state.visible,previewurl:""});
                        }} >
                        <AutoImage
                            //resizeMode={"contain"}
                            style={{}}
                            width={Dimensions.get("window").width}
                            source={{uri:  tool.getimageurl(Dimensions.get("window").width,0,1,this.state.previewurl)}}
                            fallbackSource={require("../../static/imgs/image_error_big.png")}
                        />
                    </TouchableHighlight>
                </Flex>
            </Modal>
            {/* <ImagePreview visible={this.state.visible} source={{uri: this.state.previewurl}} close={()=>{this.setState({visible:false})}} /> */}
                <ActivityIndicator
                    toast
                    size="large"
                    text="数据加载中..."
                    animating={this.state.loading}
                />
            </Layout>
        );
    }
}
